<template>
    <div class="edit_wrapper">
        <!-- 头部 -->
        <page-header-com>
            <template #default>新增收货地址</template>
            <template #right
                ><button class="save" @click="save">保存</button></template
            >
        </page-header-com>
        <!-- 表单 -->
        <div class="info_box">
            <div class="info_item">
                <span>收货人</span
                ><input
                    v-model="userName"
                    type="text"
                    placeholder="请填写收货人姓名"
                />
            </div>
            <div class="info_item">
                <span>手机号码</span
                ><input
                    v-model="phone"
                    type="text"
                    placeholder="请填写收货人手机号码"
                />
            </div>
            <div class="info_item" @click="show = true">
                <span>所在地区</span
                ><input
                    v-model="address"
                    type="text"
                    placeholder="省市区县、乡镇等"
                />
            </div>
            <div class="info_item">
                <span>详细地区</span
                ><input
                    v-model="detailAddress"
                    type="text"
                    placeholder="街道、楼牌号等"
                />
            </div>
            <!-- 设置默认地址 -->
            <div class="default">
                <div class="default_text">
                    <h5>设置默认地址</h5>
                    <p>
                        提醒：每次下单时会使用该地址！<br />
                        实际下单地址会根据您购物切换的地址智能切换,<br />
                        请在下单时确认哦~
                    </p>
                </div>
                <nut-switch v-model="checked" active-color="#c1ab96" />
            </div>

            <!-- 删除地址 -->
            <nut-button color="#d1082a" block type="primary" @click="del"
                >删除收货地址</nut-button
            >
        </div>

        <!-- 地区选择器（选择地址有问题，后期处理） -->
        <nut-picker
            v-model:visible="show"
            :columns="cascaderColumns"
            title="配送至"
            @confirm="confirm"
        ></nut-picker>

        <!-- 提示框 -->
        <nut-dialog
            teleport="#app"
            title="提示"
            :content="content"
            v-model:visible="visible"
        >
            <template #footer>
                <nut-button
                    @click="$router.back()"
                    size="small"
                    color="#C1AB96"
                    plain
                    >确定</nut-button
                >
            </template>
        </nut-dialog>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { addAddress, delAddress, setDefaultAddress } from "../api/address";
export default {
    name: "editAddressView",
    data() {
        return {
            // 弹出框内容
            content: "",
            visible: false,
            show: false,
            // 是否为默认地址
            checked: this.$route.params.default_set == "1",
            userName: this.$route.params.name,
            phone: this.$route.params.phone,
            address: this.$route.params.area_name,
            detailAddress: this.$route.params.desc,
            // 当前的地址 id
            address_id: this.$route.params.id,
        };
    },
    methods: {
        async save() {
            // 输入为空，不执行
            if (this.userName) {
                // 点击保存地址
                const { data } = await addAddress({
                    name: this.userName,
                    phone: this.phone,
                    area_name: this.address,
                    desc: this.detailAddress,
                    post_code: 9527,
                    area: 1234,
                });
                this.address_id = data.result.id;
                // 若勾选默认地址
                if (this.checked) {
                    const { data } = await setDefaultAddress(this.address_id);
                    console.log(data);
                }
                // 弹出框
                this.content = data.msg;
                this.visible = true;
            }
        },
        async del() {
            // 输入为空，不执行
            if (this.userName) {
                const { data } = await delAddress(this.address_id);
                // 弹出框
                this.content = data.msg;
                this.visible = true;
            }
        },
        confirm({ selectedValue, selectedOptions }) {
            console.log(selectedValue, selectedOptions);
            // 初次点击报错，没有北京这项数据
            let first = selectedOptions[0]
                ? selectedOptions[0].cityname
                : "北京";
            this.address = `${first}-${selectedOptions[1].cityname}-${selectedOptions[2].cityname}`;
        },
    },
    computed: {
        // 获取地址列表
        ...mapState(["cascaderColumns", "userInfo"]),
    },
    created() {
        // 发送请求获取地址列表
        this.$store.dispatch("getAddressList");
    },
};
</script>

<style lang="scss" scoped>
.save {
    background-color: transparent;
    border: 0;
    color: #c1ab96;
    font-size: 3.2vw;
    margin-left: 3.2vw;
}
.edit_wrapper {
    background-color: #fff;
    height: 100vh;
}
.info_box {
    padding: 4.267vw 5.867vw;
    .info_item {
        display: flex;
        align-items: center;
        font-size: 3.733vw;
        height: 13.333vw;
        border-bottom: 0.267vw solid rgb(232, 231, 231);
        span {
            width: 18.133vw;
        }
        input {
            font-size: 3.2vw;
            flex: 1;
            border: 0;
            outline: none;
        }
    }
    .default {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 21.333vw;
        margin-top: 4.8vw;
        border-bottom: 0.267vw solid rgb(232, 231, 231);

        .default_text {
            line-height: 1.3;
            h5 {
                font-size: 3.733vw;
            }
            p {
                font-size: 3.2vw;
                color: #999;
            }
        }
    }
    .nut-button {
        margin-top: 61.333vw;
    }
}
</style>